<template>
  <div class="testMessage">
    <el-card class="box-card" v-for="(item,index) in tests" :key="index">
      <div slot="header" class="clearfix">
        <span>考试详情</span>
        <el-tag size="small" :type='item.examState===2? "danger":(item.examState===1? "success":"info")'>{{item.examStateName}}</el-tag>
        <el-button style="float: right; padding: 3px 0" type="text" @click="editTest(item)" :style="{display: hasBtn(item.examState)}">开始考试</el-button>
      </div>
      <div class="text item">
        考试名称：{{item.examName}}
      </div>
      <div class="text item">
        考试时间：{{item.examTime}}
      </div>
      <div class="text item">
        考试时长：{{item.time}} 分钟
      </div>
      <div class="text item">
        考试地址：{{item.examAddress}}
      </div>
    </el-card>
    <!-- <el-tag size="small" type='success'>待考</el-tag> -->
    <!-- <el-tag size="small" type='info'>已结束</el-tag> -->
  </div>
</template>

<script>
import {getPaperMessage, judgmentStartTask} from "../../api/data";
import {Loading} from "element-ui";

export default {
  data() {
    return {
      examPaperCode:'',
      examId: 0,
      tests: [],
      input:{
        time:'',
        address:'',
        number:'',
      },
    }
  },
  methods: {
    editTest({examPaperCode,examState,examId}){//解构
      this.examPaperCode=examPaperCode;
      this.examId=examId;
      if(examState===1){
        this.$message({
          type: 'error',
          message: '考试还没开始喔！请刷新页面'
        });
      }
      judgmentStartTask(examId).then(res=>{

        if(res.code===0){
          this.$router.push({//把试卷邀请码传给考试信息页面
            path: '/testing',
            name: 'testing',
            params: {
              examPaperCode: examPaperCode,
              examId: examId
            }
          }).catch(err => {
            console.log('输出报错',err)
          })
        }
      })
    },
    hasBtn(statusId) {
      if (statusId === 3) {
        return 'none';
      } else {
        return ''
      }
    }
  },
  mounted() {
    let loading = Loading.service({ fullscreen: true });
    getPaperMessage().then(res => {
      this.tests=res.data;
      loading.close();
    })
  }
}
</script>

<style>
.testMessage{
  padding-top: 30px;
  padding-left: 10px;
  background:url('../../src/assets/images/message.png');
  background-size:100% 100%;
  width: 100%;
  height: 100%;
}
.el-main{
  margin: 0;
}
.el-select{
  margin: 0 10px;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 280px;
  display: inline-block;
  margin: 5px 10px;
}
</style>
